<template>
  <div class="fn-nav flexbox flex-align-center flex-justify-between !bg-transparent">
    <NuxtLink :to="localePath('/')" class="flex-none">
      <!-- https://cd.sealmg.com/assets/img/logo-img4.png -->
      <img loading="lazy" class="logo !h-auto" src="~/assets/img/bg-none.png" alt="SEALMG Logo" title="SEALMG Homepage" srcset="" />
    </NuxtLink>
    <div :class="['rigth flexbox flex-align-center', modePage == 'main' ? 'main-rigth' : '']">
      <Langes langTheme="border" :onlyLange="showAll" />
      <NuxtLink v-if="rightPath" :to="localePath(`${rightPath}`)">
        <div v-if="rightPath == '/login'" class="theme-btn !hover:none" :class="[rightPath == '/login' ? 'default-btn' : 'theme-btn']">
          {{ $t('formBtn.goLogin') }}
        </div>
        <div v-if="rightPath == '/register'" :class="[rightPath == '/register' ? 'theme-btn' : 'default-btn']">{{ $t('formBtn.register') }}</div>
      </NuxtLink>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      onlyLange: {
        type: Boolean,
        default: () => false
      },
      modePage: {
        type: String,
        default: ''
      },
      rightPath: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        notype: '',
        showAll: this.onlyLange
      }
    },
    watch: {
      onlyLange: {
        handler(newVal) {
          this.showAll = newVal
        },
        deep: true,
        immated: true
      }
    },
    computed: {},
    created() {},
    methods: {}
  }
</script>
<style lang="less" scoped>
  .el-button:hover,
  .el-button:focus {
    /* color: white !important; */
    border-color: none !important;
    background-color: none !important;
  }

  .fn-nav {
    padding: 0 16px;
    box-sizing: border-box;
    width: 375px;
    height: 44px;
    margin: 0 auto;
    background-color: transparent;
    .logo {
      width: 116px;
      height: 34px;
      display: block;
      background-color: transparent;
    }
    .rigth {
      .theme-btn,
      .default-btn {
        padding: 0 24px;
        margin-left: 8px;
        width: auto;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        box-sizing: border-box;
        border-radius: 16px;
      }
      .default-btn {
        font-weight: 400;
        font-size: 12px;
        color: @font-color-99;
        background: #fcfcfc;
        border-radius: 19px;
        border: @border-1-e5;
      }
    }
    .main-rigth {
      /deep/ .lange-btn {
        background: @color-f7 !important;
        border: @border-1-f7 !important;
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .fn-nav {
      padding: 0 16px;
      box-sizing: border-box;
      width: 768px;
      height: 44px;
      margin: 0 auto;
      .logo {
        width: 116px;
        height: 34px;
        display: block;
      }
      .rigth {
        .theme-btn,
        .default-btn {
          padding: 0 24px;
          margin-left: 8px;
          width: auto;
          height: 32px;
          line-height: 32px;
          font-size: 12px;
          box-sizing: border-box;
          border-radius: 16px;
        }
        .default-btn {
          font-weight: 400;
          font-size: 12px;
          color: @font-color-99;
          background: #fcfcfc;
          border-radius: 19px;
          border: @border-1-e5;
        }
      }
      .main-rigth {
        /deep/ .lange-btn {
          background: @color-f7 !important;
          border: @border-1-f7 !important;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .fn-nav {
      padding: 0 16px;
      box-sizing: border-box;
      width: 375px;
      height: 44px;
      margin: 0 auto;
      .logo {
        width: 116px;
        height: 34px;
        display: block;
      }
      .rigth {
        .theme-btn,
        .default-btn {
          padding: 0 8px;
          margin-left: 8px;
          width: auto;
          height: 32px;
          line-height: 32px;
          font-size: 12px;
          box-sizing: border-box;
          border-radius: 16px;
        }
        .default-btn {
          font-weight: 400;
          font-size: 12px;
          color: @font-color-99;
          background: #fcfcfc;
          border-radius: 19px;
          border: @border-1-e5;
        }
      }
      .main-rigth {
        /deep/ .lange-btn {
          background: @color-f7 !important;
          border: @border-1-f7 !important;
        }
      }
    }
  }
</style>
